<template>
  <section>
    <van-sticky>
      <PageHeader title="诚信认证"/>
    </van-sticky>

    <div class="w100">
      <img :src="STATIC_BASE_URL + 'images/mp/cp_10.jpg'" class="w100"/>
    </div>

    <div class="pd10" v-if="member">
      <div class="flex flex-row flex-centerV round-box bg-color-white pd10">
        <div class="flex flex-col flex-1">
          <div class="flex flex-row flex-left flex-centerV">
            <i class="iconfont icon-credentials_icon mr5" style="font-size: 32px; color: #0bbaff;"/>
            <span class="font-biger strong">实名认证</span>
          </div>
          <div class="flex flex-row flex-left font-common color-gray-dark mt10">真诚交友，从实名开始</div>
        </div>

        <div class="flex flex-row flex-center pl10 font-common color-gray-dark" @click="$router.push({name: 'MyAuthFaceId'})" v-if="member.realname_auth_status==0">
          未认证<i class="iconfont icon-right-arrow ml5" style="font-size: 22px;"/>
        </div>

        <div class="flex flex-row flex-center pl10" v-else-if="member.realname_auth_status==1">
          <div class="inline-block round-box pd5 font-big color-green bg-color-gray">已认证</div>
        </div>
      </div>

      <div class="flex flex-row flex-centerV round-box bg-color-white pd10 mt10">
        <div class="flex flex-col flex-1">
          <div class="flex flex-row flex-left flex-centerV">
            <i class="iconfont icon-dianhua mr10" style="font-size: 32px; color: #0bbaff;"/>
            <span class="font-biger strong">手机认证</span>
          </div>
          <div class="flex flex-row flex-left font-common color-gray-dark mt10">沟通从手机开始</div>
        </div>

        <div class="flex flex-row flex-center pl10">
          <div class="inline-block round-box pd5 font-big color-green bg-color-gray">已认证</div>
        </div>
      </div>

      <van-cell-group title="其他认证">
        <van-cell title="学历" is-link :value="member.education_auth_status ? '已认证' : (memberAuth ? memberAuth.education_auth_status_str : '未认证')" @click="onEducationAuthTap" />
        <van-cell title="婚姻状况" is-link :value="member.marriage_auth_status ? '已认证' : (memberAuth ? memberAuth.marriage_auth_status_str : '未认证')" @click="onMarriageAuthTap" />
        <van-cell title="房产" is-link :value="member.house_auth_status ? '已认证' : (memberAuth ? memberAuth.house_auth_status_str : '未认证')" @click="onHouseAuthTap" />
        <van-cell title="车子" is-link :value="member.car_auth_status ? '已认证' : (memberAuth ? memberAuth.car_auth_status_str : '未认证')" @click="onCarAuthTap" />
      </van-cell-group>
    </div>

  </section>
</template>

<script>
  import Vue from 'vue';
  import {Uploader, Toast, Sticky, CellGroup, Cell} from 'vant';
  import {fileUploadByBase64Uri, memberAuthMyUri} from "../../../common/api";
  import {STATIC_BASE_URL} from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";
  import {MEMBER_AUTH_STATUS_APPROVE, MEMBER_AUTH_STATUS_REJECT} from "../../../common/constants";

  Vue.use(Uploader).use(Toast).use(Sticky).use(CellGroup).use(Cell);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        member: null,
        user: null,
        memberAuth: null
      }
    },
    methods: {
      onEducationAuthTap() {
        if(this.member.realname_auth_status==1 && this.member.education_auth_status == 0
          && (!this.memberAuth || this.memberAuth.education_auth_status == 0 || this.memberAuth.education_auth_status == MEMBER_AUTH_STATUS_REJECT)) {
          this.$router.push({name: 'MyAuthEducation'});
        }
      },
      onMarriageAuthTap() {
        if(this.member.realname_auth_status==1 && this.member.marriage_auth_status == 0
          && (!this.memberAuth || this.memberAuth.marriage_auth_status == 0 || this.memberAuth.marriage_auth_status == MEMBER_AUTH_STATUS_REJECT)) {
          this.$router.push({name: 'MyAuthMarriage'});
        }
      },
      onHouseAuthTap() {
        if(this.member.realname_auth_status==1 && this.member.house_auth_status == 0
          && (!this.memberAuth || this.memberAuth.house_auth_status == 0 || this.memberAuth.house_auth_status == MEMBER_AUTH_STATUS_REJECT)) {
          this.$router.push({name: 'MyAuthHouse'});
        }
      },
      onCarAuthTap() {
        if(this.member.realname_auth_status==1 && this.member.car_auth_status == 0
          && (!this.memberAuth || this.memberAuth.car_auth_status == 0 || this.memberAuth.car_auth_status == MEMBER_AUTH_STATUS_REJECT)) {
          this.$router.push({name: 'MyAuthCar'});
        }
      },
      getMyAuth() {
        const that = this;
        const url = memberAuthMyUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.memberAuth = data.auth;
          }
        }, response => {
          // error callback
        })
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;

      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
      });

      this.EventBus.$on('OnMemberAuth', () => {
        this.member = this.GLOBAL.memberProfile;
        this.getMyAuth();
      });

      this.getMyAuth();
    }
  }
</script>

<style scoped>

</style>
